<html>
  <head>
    <meta charset="UTF-8">
    <meta name="Author" content="joneywon">
    <title>DEMO</title>
	<script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.jsonp.js" type="text/javascript"></script>
	<style type="text/css">
		table{
			border: 1px solid #ddd;
			padding: 10px;

		}

		caption {
		    margin: 0em 0 0.7em 0;
		    text-align: center;
		    font-weight: bold;
		    font-size: 30px;
		    letter-spacing: 0.5px;
		    color: black;
		}

		.content {
		    width: 80%;
		    font-size: 0.938em;
		    border-collapse: collapse;/*边框会合并为一个单一的边框*/
		}

		.content th {
		    text-align: center;
		    padding: 0.5em 0.5em;
		    font-weight: bold;
		}

		.content td {
		    padding: 0.5em 0.5em;
		    border-bottom: solid 1px #ccc;
		}

		.content, .content tr th, .content tr td {
	    	border:1px solid #aaa;
		}
	</style>
 </head>
 <body>
<form id="fm">
<table align="center">
	<caption style="padding:10px;font-size:20px;font-weight: bold;">失信人查询</caption>
	<tr>
		<td align="right">被执行人姓名/名称：</td>
		<td><input type="text" name="pName" style="width:160px"/> &nbsp;<span style="color:red;font-weight: bold;">*</span>必填，至少两个字</td>
	</tr>
	<tr>
		<td align="right">身份证号码/组织机构代码：</td>
		<td><input type="text" name="pCardNum" style="width:160px"/> &nbsp;选填</td>
	</tr>
	<tr>
		<td align="right">省份：</td>
		<td>
        	<select id="pProvince" name="pProvince" style="width:160px;height:27px;font-size: 14px; font-weight: bold;">
                <option value="0">--全部--</option>
                <option value="660">北京</option>
                <option value="661">天津</option>
                <option value="662">河北</option>
                <option value="663">山西</option>
                <option value="664">内蒙古</option>
                <option value="665">辽宁</option>
                <option value="666">吉林</option>
                <option value="667">黑龙江</option>
                <option value="668">上海</option>
                <option value="669">江苏</option>
                <option value="670">浙江</option>
                <option value="671">安徽</option>
                <option value="672">福建</option>
                <option value="673">江西</option>
                <option value="674">山东</option>
                <option value="675">河南</option>
                <option value="676">湖北</option>
                <option value="677">湖南</option>
                <option value="678">广东</option>
                <option value="679">广西</option>
                <option value="680">海南</option>
                <option value="681">重庆</option>
                <option value="682">四川</option>
                <option value="683">贵州</option>
                <option value="684">云南</option>
                <option value="685">西藏</option>
                <option value="686">陕西</option>
                <option value="687">甘肃</option>
                <option value="688">青海</option>
                <option value="689">宁夏</option>
                <option value="690">新疆</option>
                <option value="691">香港</option>
                <option value="692">澳门</option>
                <option value="693">台湾</option>
            </select>
            &nbsp;选填
		</td>
	</tr>
	<tr>
		<td align="right">验证码：</td>
		<td>
			<input type="text" name="pCode" style="width:80px"/>
			<img id="captchaImg" src="" title="点击重新获取验证码" style="cursor:hand;height: 30px;vertical-align: middle;margin-bottom:5px;" onclick="refreshCaptcha();">
		</td>
	</tr>	
	<tr>
		<td colspan="2" align="center">
			<input name="captchaId" value="" type="hidden"/>
			<input name="currentPage" value="1" type="hidden"/>
			<input type="button" value="查询" onclick="search();"/>
		</td>
	</tr>
</table>
</form>

	<table id="content" class="content"  align="center">
		
	</table>
	<div id="nav" align="center">
    </div>

	<table id="detail" class="content"  align="center">			
	</table>    

<script type="text/javascript">
	var domain = "http://zxgk.court.gov.cn/shixin/";
    var totalPage = 0;
    $(function () {
		getCaptchaId();
       
    });

    
	function refreshCaptcha() {
		$('#captchaImg').attr('src',domain+'captcha.do?captchaId=' + $("input[name='captchaId']").val()+'&random='+Math.random());
	}

	function search(){
		var pName = $("input[name='pName']").val(); 
		var pCardNum = $("input[name='pCardNum']").val();
		var pProvince = $("select[name='pProvince'] option:selected").val(); 
		var pCode = $("input[name='pCode']").val();
		var captchaId = $("input[name='captchaId']").val();
		var currentPage = $("input[name='currentPage']").val()|1;

		var params={
			"pName":pName,
			"pCardNum":pCardNum,
			"pProvince":pProvince,
			"pCode":pCode,
			"captchaId":captchaId,
			"currentPage":currentPage
		}

		//alert(JSON.stringify(params));

/*		var form = new FormData();
		  form.append("pName",pName);
		  form.append("pCardNum",pCardNum);
		  form.append("pProvince",pProvince);
		  form.append("pCode",pCode);
		  form.append("captchaId",captchaId);*/
 		//$("#fm").serialize()
 		$("#content").empty();
		$("#detail").empty();
		$("#nav").empty();
		$.ajax({
            type: 'post',
            contentType: "application/json;charset=UTF-8",
            url: "http://127.0.0.1:8080/api/dishonest/shixin_qry",
            data:JSON.stringify(params),
			dataType: 'html',
            success: function (html) {
            	var ht = $(html);
            	var tb = ht.find("#Resultlist");
            	if(tb.length==0){
					$("#nav").html("<span style='color: red; padding: 4px;'>验证码错误或验证码已过期，请重新输入！</span>"); 
            	}else{
            		var pattern = /var\stotalPage\s=\s\d*;/;
	            	totalPage = (html.match(pattern))[0].match(/\d+/);
	        		$("#content").html($(html).find("#Resultlist").html());
	        		$("#nav").html($(html).find("#Resultlist").next().html());
        			bindClickAction();
            	}

            },
            error: function () {
                alert("出错啦，可能没连上服务器");
            },
            complete: function () {

            }
        });
	}

	function getCaptchaId(){
		$.ajax({
            type: 'get',
            url: "http://127.0.0.1:8080/api/dishonest/captcha_id",
            dataType: 'json',
            success: function (ret) {
                if (ret.code==0) {
                	captchaId = ret.body;
                	$("input[name='captchaId']").val(captchaId); 
                	refreshCaptcha();
                }else{
                	alert(ret.msg);
                }
            },
            error: function () {
                //toastr.error("出错啦，可能没连上服务器");
                alert("出错啦，可能没连上服务器");
            },
            complete: function () {

            }
        });
	}

	function gotoPage(page){
		$("input[name='currentPage']").val(page);
		search();
	}
	function jumpTo(){
		var pageNum = parseInt($('#pagenum').val(),10);
		if(pageNum > totalPage){
			pageNum = totalPage;
		}
		gotoPage(pageNum);
	}

	function bindClickAction(){
		$(".View").click(function(e){
		   var id = e.target.id;
		   var pCode = $("input[name='pCode']").val();
		   var captchaId = $("input[name='captchaId']").val();
			$.ajax({
	            type: 'get',
	            url: "http://127.0.0.1:8080/api/dishonest/shixin_detail?id="+id+"&pCode="+pCode+"&captchaId="+captchaId,
				dataType: 'json',
	            success: function (data) {
	            	//$("#detail").html(JSON.stringify(data));
	            	var obj = JSON.parse(data.body);
	            	var item = "<tr>" +
			                    "    <td align='right' width='200px'>被执行人姓名/名称：</td>" +
			                    "    <td>"+obj.iname+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>性别：</td>" +
			                    "    <td>"+obj.sexy+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>身份证号码/组织机构代码：</td>" +
			                    "    <td>"+obj.cardNum+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>执行法院：</td>" +
			                    "    <td>"+obj.courtName+"</td>" +
			                    "</tr>" +
			                    "" +
			                    "<tr>" +
			                    "    <td align='right'>省份：</td>" +
			                    "    <td>"+obj.areaName+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>执行依据文号：</td>" +
			                    "    <td>"+obj.gistId+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>立案时间：</td>" +
			                    "    <td>"+obj.regDate+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>案号：</td>" +
			                    "    <td>"+obj.caseCode+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>做出执行依据单位：</td>" +
			                    "    <td>"+obj.gistUnit+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>生效法律文书确定的义务：</td>" +
			                    "    <td>"+obj.duty+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>被执行人的履行情况：</td>" +
			                    "    <td>"+obj.performance+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>失信被执行人行为具体情形：</td>" +
			                    "    <td>"+obj.disruptTypeName+"</td>" +
			                    "</tr>" +
			                    "<tr>" +
			                    "    <td align='right'>发布时间：</td>" +
			                    "    <td>"+obj.publishDate+"</td>" +
			                    "</tr>";
			        $("#detail").empty();
			        $("#detail").append(item);            
	            },
	            error: function () {
	                alert("出错啦，可能没连上服务器");
	            },
	            complete: function () {

	            }
	        });		   
		})
	}
</script>
 </body>
</html>
